<!-- 视频监控 -->
<template>
	<border cardTitle="视频监控" hasDetails @details="details">
		<div class="flex videobox">
			<video @click="screen(videoUrl + '/cow4.mp4')" class="flex-1" :src="videoUrl + '/cow4.mp4'" autoplay muted loop></video>
			<video @click="screen(videoUrl + '/cow3.mp4')" class="flex-1" :src="videoUrl + '/cow3.mp4'" autoplay muted loop></video>
		</div>
		<playVideo ref="playVideo"></playVideo>
	</border>
</template>

<script>
import border from '../border.vue';
import playVideo from '../playVideo.vue';
export default {
	components: { border, playVideo },
	methods: {
		screen(url) {
			console.log(url);
			this.$refs.playVideo.show(url);
		},
		details() {
			this.$router.push('/videoMonitor/videolist');
		}
	}
};
</script>

<style scoped lang="less">
.videobox {
	height: 100%;
	padding: 26px 17px;
	video {
		height: 100%;
		object-fit: cover;
		& + video {
			margin-left: 14px;
		}
	}
}
</style>
